<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <!--      <div class="top-title">数据可视化</div>-->
      <!--      <el-tabs v-model="tabActive" class="demo-tabs">-->
      <!--        <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>-->
      <!--      </el-tabs>-->
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle" :style="left_style">
              <div class="left-content">
                <div style="height: 30px"></div>
                <div class="left-title">{{ nowTitle }}</div>
                <div style="height: 30px"></div>
                <!--                <el-text line-clamp="2">{{ noteData.note }}</el-text>-->
                <!--                <div>-->
                <!--                  <el-text line-clamp="2">{{  noteData.content }}</el-text>-->
                <!--                </div>-->

                <div class="left-title">{{ WeatherInfo.province }} {{WeatherInfo.city?'·':''}} {{ WeatherInfo.city }}</div>
                <div class="left-title">
                  <span><img :src="WeatherInfo.data['Icon']"></span>
                  {{ WeatherInfo.data.weather }} · {{ WeatherInfo.data.wind }}
                </div>
                <div class="left-title">
                  {{ WeatherInfo.data.nightTemp }}°C 至 {{ WeatherInfo.data.dayTemp }}°C
                </div>
                <div class="left-format-now">{{ formatNow }}</div>
                <div class="left-format-now">{{ formatNowTime }}</div>
              </div>

            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_person.png" alt=""/>
                </div>
                <span class="item-value">{{showTodayVisits}}</span>
                <span class="traffic-name sle">今日访问量</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_team.png" alt=""/>
                </div>
                <span class="item-value">{{showHistoryVisits}}</span>
                <span class="traffic-name sle">历史访问量</span>
              </div>
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/today.png" alt=""/>
                </div>
                <span class="item-value">{{showTodayTasks}}</span>
                <span class="traffic-name sle">今日执行任务条数</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/book_sum.png" alt=""/>
                </div>
                <span class="item-value">{{showHistoryTasks}}</span>
                <span class="traffic-name sle">历史执行任务条数</span>
              </div>
            </div>
          </el-col>
          <!--                    <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">-->
          <!--                      <div class="item-right">-->
          <!--                        <div class="echarts-title">接口成功失败占比：成功 / 失败</div>-->
          <!--                        <div class="book-echarts">-->
          <!--                          <Pie ref="pieRef" />-->
          <!--                        </div>-->
          <!--                      </div>-->
          <!--                    </el-col>-->
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <div class="item-right">
              <Echarts height="400px" width="100%" :option="BarOption"></Echarts>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card bottom-box">
<!--      <div class="bottom-title">每日新增数量</div>-->
      <div class="curve-echarts">
        <Echarts height="400px" width="100%" :option="LineOption"></Echarts>
      </div>
    </div>
  </div>
</template>

<script setup name="dataVisualize">
import {computed, nextTick, onBeforeMount, onMounted, reactive, ref} from "vue";
import Axios from 'axios'
import {getTimeState} from "@/utils/index.js";
import {getNoteData, getWeatherInfo} from "@/api/modules/home/home.js";
import {useNow, useDateFormat} from '@vueuse/core'
import Echarts from "@/views/vab/echarts/components/index.vue";

const formatNow = useDateFormat(useNow(), 'YYYY年MM月DD日 ddd')
const formatNowTime = useDateFormat(useNow(), 'HH时mm分ss秒')


const tabActive = ref(1);

const tab = [
  {label: "未来7日", name: 1},
  {label: "近七日", name: 2},
  {label: "近一月", name: 3},
  {label: "近三月", name: 4},
  {label: "近半年", name: 5},
  {label: "近一年", name: 6}
];


const nowTitle = computed(() => getTimeState());
let noteData = reactive({})

const left_style = ref({
  backgroundImage: "",
})

let WeatherInfo = reactive({
  "province": "",
  "city": "",
  "data": {
    "Icon": "",
    "weather": "",
    "wind": "",
  }
})

onBeforeMount(() => {
  getNoteData().then(res => {
    noteData = res.data
    left_style.value.backgroundImage = "url(" + noteData["picture"] + ")"
  });

  getWeatherInfo().then(res => {
    WeatherInfo = res.data
    todayVisits.value +=100
    historyVisits.value+=136
    todayTasks.value+=35
    historyTasks.value+=238
  })
})

// {
//   "ret": "ok",
//     "code": 110000,
//     "province": "上海市",
//     "city": "宝山区",
//     "area": "",
//     "data": {
//   "time": "2023-02-12 08:20",
//       "dayIcon": "https://cache.ip138.com/user/image/tianqi/d06.png",
//       "dayWeather": "雨夹雪",
//       "dayTemp": "1",
//       "dayWind": "<3级",
//       "nightIcon": "https://cache.ip138.com/user/image/tianqi/n01.png",
//       "nightWeather": "多云",
//       "nightTemp": "-4",
//       "nightWind": "<3级",
//       "temp": "1",
//       "Icon": "https://cache.ip138.com/user/image/tianqi/d06.png",
//       "weather": "雨夹雪",
//       "wind": "东北风1级",
//       "humidity": "85",
//       "pm25": "144"
// }
// }

import { TransitionPresets, useTransition } from '@vueuse/core'

// 今日访问量
const todayVisits = ref(0)
const outputTodayVisits = useTransition(todayVisits, {
  duration: 2000,
  transition: TransitionPresets.easeOutExpo,
})
const showTodayVisits = computed(()=>parseInt(outputTodayVisits.value.toString()))
// 历史访问量
const historyVisits = ref(0)
const outputHistoryVisits = useTransition(historyVisits, {
  duration: 2000,
  transition: TransitionPresets.easeOutExpo,
})
const showHistoryVisits = computed(()=>parseInt(outputHistoryVisits.value.toString()))
// 今日任务
const todayTasks = ref(0)
const outputTodayTasks = useTransition(todayTasks, {
  duration: 2000,
  transition: TransitionPresets.easeOutExpo,
})
const showTodayTasks = computed(()=>parseInt(outputTodayTasks.value.toString()))
// 历史任务
const historyTasks = ref(0)
const outputHistoryTasks = useTransition(historyTasks, {
  duration: 2000,
  transition: TransitionPresets.easeOutExpo,
})
const showHistoryTasks = computed(()=>parseInt(outputHistoryTasks.value.toString()))



const BarOption = ref({
  title: {
    text: '   每日任务执行图',
    subtext: '     每日UI测试执行数与接口测试执行数',
  },
  grid: {
    top: '80px'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    barWidth: '15px',
  },
    {
      data: [110, 180, 120, 120, 60, 90, 110],
      type: 'bar',
      barWidth: '15px',
    }]
})


const LineOption = ref({
  title: {
    text: '场景数',
    subtext: '近7日新建的场景数',
  },
  grid: {
    top: '80px'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line',
  },
    {
      data: [110, 180, 120, 120, 60, 90, 110],
      type: 'line',
    }]
})


</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
